<template>
    <section>
        <el-col class="toolbar">
            <el-form :inline="true">
                <el-form-item style="float: right">
                    <el-button type="primary"  @click="visible.addForm=true" icon="el-icon-circle-plus-outline">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>



        <!--列表start -->
        <el-table :data="roles" highlight-current-row v-loading="visible.listLoading"
                  style="width: 100%;">
            <el-table-column type="index" >
            </el-table-column>
            <el-table-column prop="name" label="权限组" >
            </el-table-column>
            <el-table-column prop="description" label="描述" >
            </el-table-column>
            <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                    <el-button type="text" @click="showEdit(scope.row)">编辑</el-button>
                    <el-button type="text" @click="handleDelete(scope.row)" class="ml-20">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--列表end -->

        <!--新增表单 start-->
        <el-dialog  :visible.sync="visible.addForm" width="900px">
            <div slot="title" class="dialog-title">
                新增权限组
            </div>
            <el-form :model="addForm" label-width="90px" ref="addForm" :rules="addFormRules">
                <el-form-item label="名称"  prop="name"  >
                    <el-input v-model.trim="addForm.name" auto-complete="off" ></el-input>
                </el-form-item>
                <el-form-item label="描述"  prop="description"  >
                    <el-input v-model.trim="addForm.description" auto-complete="off" ></el-input>
                </el-form-item>
                <el-form-item :label="item.title"  prop="permissions" v-for="item in permissions" style="margin-bottom: 0px">
                    <el-checkbox-group v-model="addForm.permissions">
                        <el-checkbox :label="auth.title" v-for="(auth,index) in item.children" key="index"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="visible.addForm = false">取 消</el-button>
                <el-button type="primary" @click="handleAdd" :loading="visible.addLoading">确 定</el-button>
            </div>
        </el-dialog>
        <!--新增表单 end-->

        <!--编辑表单 start-->
        <el-dialog  :visible.sync="visible.editForm" width="900px">
            <div slot="title" class="dialog-title">
                修改权限组
            </div>
            <el-form :model="editForm" label-width="90px" ref="editForm" >
                <el-form-item label="名称"  prop="name" >
                    <el-input v-model.trim="editForm.name" auto-complete="off" disabled ></el-input>
                </el-form-item>
                <el-form-item label="描述"  prop="description"  >
                    <el-input v-model.trim="editForm.description" auto-complete="off" ></el-input>
                </el-form-item>
                <el-form-item :label="item.title"  prop="permissions" v-for="(item,index) in permissions" style="margin-bottom: 0px"  key="index">
                    <el-checkbox-group v-model="editForm.permissions">
                        <el-checkbox :label="auth.title" v-for="(auth,index) in item.children" key="index" ></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="visible.editForm = false">取 消</el-button>
                <el-button type="primary" @click="handleEdit" :loading="visible.editLoading">确 定</el-button>
            </div>
        </el-dialog>
        <!--编辑表单 end-->
    </section>
</template>
<script>
  import {getRoles, checkRoleName, addRole, editRole} from '../../api/api';

  export default {
    data () {
      return {
        roles: [],
        permissions: [],
        visible: {
          addForm: false,
          addLoading: false,
          listLoading: false,
          editForm: false,
          editLoading: false
        },
        addForm: {
          name: '',
          permissions: [],
          description: ''
        },
        editForm: {
          name: '',
          permissions: [],
          description: ''
        },
        addFormRules: {
          name: [
            {
              validator: (rules, value, callback) => {
                checkRoleName(value).then(data => {
                  if (parseInt(data.status) === 1) {
                    callback()
                  } else {
                    callback(new Error('不合法的权限组名'))
                  }
                })
              },
              trigger: 'blur'
            },
            {required: true, message: '请输入权限组名', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      // 列表
      handleList () {
        this.listLoading = true
        getRoles({}).then(res => {
          if (parseInt(res.status) === 1) {
            this.roles = res.data.roles
            this.permissions = res.data.permissions
          }
          this.listLoading = false
        })
      },
      // 新增
      handleAdd () {
        this.$refs['addForm'].validate(valid => {
          if (valid) {
            this.visible.addLoading = true
            addRole(this.addForm).then(res => {
              if (parseInt(res.status) === 1) {
                this.$message({
                  message: '新增成功',
                  type: 'success'
                })
                this.visible.addForm = false
                this.$refs['addForm'].resetFields()
                this.handleList()
              } else {
                this.$alert('新增失败', '提示', {type: 'error'})
              }
              this.visible.addLoading = false
            })
          }
        })
      },
      // 显示编辑
      showEdit (role) {
        this.editForm.name = role.name
        this.editForm.permissions = role.permissions
        this.visible.editForm = true
      },
      // 编辑
      handleEdit () {
        this.visible.editLoading = true
        editRole(this.editForm).then(res => {
          if (parseInt(res.status) === 1) {
            this.$message({
              message: '编辑成功',
              type: 'success'
            })
            this.visible.editForm = false
            this.handleList()
          } else {
            this.$alert('编辑失败', '提示', {type: 'error'})
          }
          this.visible.editLoading = false
        })
      },
      // 删除
      handleDelete (role) {
        this.$confirm('确认要删除该权限组吗？', '提示', {}).then(() => {
          editRole({name: role.name, type: 'delete'}).then(res => {
            if (parseInt(res.status) === 1) {
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              this.handleList()
            } else {
              this.$alert('删除失败', '提示', {type: 'error'})
            }
          })
        })
      }
    },
    mounted () {
      this.handleList();
    }
  }
</script>